/** @file Switch.qml
@brief Switch object with label, info button and popup

The switch element shows the switchable object to the left and a text field to the right.
If the loadef flagInfo is set to true the rightmost side of the object shows the \e "i"
info button that when it is clicked opens a small popup rectangle showing additional text
related to the object.

@authorname \n
@licenseversion \n
@actualversion - @dateupdate

@licensenote
*/

import QtQuick 1.0
import "Theme.js" as JObj
import "Math.js"as JMath

Item {
    id: horizontalswitch

    // Signal that gets fired when switch state has been toggled
    signal switched(bool falgstate)
    // Property indicating current state
    property bool switchedOn: objLoad.getFlag()

    function setSwitchStatus(status) {
        switchedOn = status;
    }

    width: objLoad.getWidth()
    height: objLoad.getHeight()
    anchors.left: parent.left

    // The switch toggle image
    BorderImage {
        id: toggleSwitch
        height: objLoad.getHeight(); smooth: true
        anchors.left: parent.left
        border { left: 10; top: 10; right: 10; bottom: 10 }
        source: switchedOn == true ? JObj.getSwitchOn(objLoad.getTheme()) :JObj.getSwitchOff(objLoad.getTheme());
        MouseArea {
            anchors.fill: toggleSwitch
            onClicked: { switchedOn = !switchedOn; horizontalswitch.switched(switchedOn); }
        }
    }

    onSwitchedOnChanged: {
        if (switchedOn)
            toggleSwitch.source = JObj.getSwitchOn(objLoad.getTheme());
        else
            toggleSwitch.source = JObj.getSwitchOff(objLoad.getTheme());
    }

    // The text label
    Text {
        id: label
        anchors.left: toggleSwitch.right
        anchors.leftMargin: objLoad.getFieldSpacing();
        color: JMath.sw_TxtColor; text: objLoad.getString();
        font.pointSize: objLoad.getFontSwitches();
    }

    // Info button
    BorderImage {
        id: button
        source: JObj.getInfoPopIco(objLoad.getTheme())
        border { left: 10; top: 10; right: 10; bottom: 10 }
        anchors.right: parent.right
        anchors.rightMargin: objLoad.getFieldSpacing()
        // object is forced to be square
        height: objLoad.getHeight(); width: objLoad.getHeight()
        clip: true
        // This object can be deactivated
        visible: objLoad.getInfoFlag()

        Rectangle { id: shade; anchors.fill: button; radius: 5; color: "black"; opacity: 0 }
        MouseArea { id: mouseArea; anchors.fill: parent; onClicked: { moreInfo.show(); } }
        states: State {
            name: "pressed"; when: mouseArea.pressed == true
            PropertyChanges { target: shade; opacity: .2 }
        }
    }

    // Pop more info in a small area on top of the caller object.
    Item {
        id: moreInfo
        opacity: showInfo;
        // Size of the message area is 75% less wide and three times height the
        // switch row size
        width: objLoad.getWidth() * 0.75; height: objLoad.getHeight() * 3
        anchors.right: button.left; anchors.rightMargin: -(button.width / 2)
        anchors.verticalCenter: button.verticalCenter
        property bool showInfo: false
        function show() { showInfo = true; }
        // When opacity changes the object appear fading
        Behavior on opacity { NumberAnimation { duration: 600; easing.type: Easing.InOutQuad } }
        // Clicking on the mousearea closes the info box.
        // Note the the clickable area is not all the message area but only the
        // surface of the parent object.
        MouseArea {
            enabled: moreInfo.showInfo;
            anchors.fill: moreInfo; onClicked: moreInfo.showInfo = false
        }
        // The background rectangel of the info area has the same
        // size of the entire object
        Rectangle {
            id: background; width: objLoad.getWidth() * 0.75; height: objLoad.getHeight() * 3
            color: JMath.sw_popBackColor; border.color: JMath.sw_popBorderColor
        }
        // The text message is anchored to the top left corner of the rectangle
        // with a top-left margin. The values are fixed because this object is part
        // of a compound element that should not be loaded independently.
        Text {
            id: popLabel
            width: objLoad.getWidth() * 0.70
            anchors.top: background.top; anchors.left: background.left
            anchors.topMargin: 5; anchors.leftMargin: 10
            text: objLoad.getMessage(); wrapMode: Text.WordWrap
            font.pointSize: objLoad.getFontSwitches();
            color: "black"
        }
    }
}
